h6 i.spinner {
	margin-top: 2px;
}

.articles-view-option {
	display: inline-block;
	float: right;
	margin-left: 5px !important;

	li {
		float: left;
		padding: 1px 4px;
		#gradient > .vertical(#fefefe, #cecece);
		border: 1px solid #bbb;

		&:first-child {
			.border-radius(4px 0 0 4px);
		}

		&:last-child {
			border-left: 0;
			.border-radius(0 4px 4px 0);
		}

		&.active {
			#gradient > .vertical(#cecece, #fefefe);
		}
	}
}

body .articles, body #tabs-container .articles {
	border: 1px solid lighten(#cacaca, 10%);
	.border-radius(6px);
	border-bottom: 0;
	margin: 0;
	position: relative;


	.article-description {
		display: none;
	}

	&.no-articles {
		.article-description {
			display: block;
			font-size: 16px;
			line-height: 1.4em;
			color: #999;

			h2 {
				font-weight: bold;
				font-size: 26px;
				margin-top: 40px;
			}

			p {
				margin-left: 0;
			}

			.article-instructions {
				display: inline-block;
				float: right;
				margin-top: -22px;
				width: 477px;
				height: 507px;
				background-image: url(../images/instructions.png);
			}

			.article-text {
				margin-right: 520px;
				padding-left: 15px;

				.sample {
					width: 100%;
					margin-top:20px;
					-webkit-box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, .2);
					-moz-box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, .2);
					box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, .2);
				}

			}

		}


		&.provider-simple {
			.article-instructions {
				background-image: url(../images/instructions-simple.png);
			}
		}
	}

	&.empty, &.loading {
		border: 1px solid lighten(#cacaca, 10%);
	}

	&.no-articles {
		border: 0;
	}

	&.loading {
		min-height: 128px;
		background: url(../images/loader-64.gif) 50% 50% no-repeat;
	}

	.article {
		font-size: @baseFontSize;
		color: #666;
		text-shadow: 0 1px 0 @white;
		#gradient > .vertical(lighten(#f7f8f8, 5%), lighten(#e9e9e8, 5%));
		border-bottom: 1px solid lighten(#cacaca, 10%);
		border-top: 1px solid @white;
		position: relative;
		border-left: 1px solid transparent;
		border-right: 1px solid transparent;

		&.first-child {
			.border-radius(6px 6px 0 0);
		}

		&:last-child {
			.border-radius(0 0 6px 6px);
		}

		&.first-child.last-child {
			.border-radius(6px);
		}

		&.display-limit-flag {
			border-left: 1px solid #0088cc;
			border-right: 1px solid #0088cc;

			&.first-child {
				border-top: 1px solid #0088cc;
			}

			&.last-child {
				border-bottom: 1px solid #0088cc;
			}
		}

		.icon {
			&.edit, &.cross, &.check {
				display: inline-block;
				cursor: pointer;
				vertical-align: middle;
			}

			&.cross, &.check {
				display: none;
			}
		}

		.input-prepend {
			.sprocket-dropdown {
				margin-bottom: 0;
				.dropdown-toggle {
					.border-radius(0 4px 4px 0);
					line-height: 19px;
					height: 16px;
					.caret {
						margin-top: 5px;
					}
				}
				a {
					text-shadow: none;
				}
			}
		}

		.graphic {
			width: 50px;
			height: 50px;
			margin: 5px;
			float: left;
			background-color: darken(@white, 2%);
			border: 1px solid #c6c6c6;
			.border-radius(5px);
			.box-shadow(0 0 5px rgba(0, 0, 0, 0.1) inset);
		}

		.summary {
			padding: 8px 5px;
			color: #b7b7b7;
			width: 50%;
			font-style: italic;
			position: relative;
			float: left;

			&.no-items {
				border-right: 0;
				width: 85%;
			}

			input {
				margin: 0;
			}

			.title {
				border-bottom: 1px solid #e5e5e5;
				.box-shadow(0 1px 0 #fff);
				margin: 0 0 5px;
				padding: 0 0 5px;

				h1 {
					font-size: 15px;
					color: #797979;
					font-style: normal;
					font-weight: normal;
					margin: 0 40px 0 0;
					padding: 0;
					.ellipsis();
				}

				.details, .deleting {
					clear: both;
					position: absolute;
					right: 5px;
					top: 12px;

					i {
						float: left;
						margin-left: 3px;

						&.preview {
							cursor: pointer;
						}
					}

					.info-wrapper {
						cursor: default;
					}

					.remove-wrapper {
						background: rgba(0, 0, 0, 0.3);
						color: #fff;
						text-shadow: 0 1px 0 #555;
						border-radius: 100px;
						padding: 2px 5px;
						cursor: pointer;

						&:hover, &.active {
							background: rgba(0, 0, 0, 0.5);
						}

						.confirm {
							display: none;
						}

						.remove {
							font-size: 14px;
							font-weight: bold;
						}
					}
				}

				.deleting {
					display: none;
					.opacity(100);
					top: 12px;
					right: 10px;
				}
			}

			.category {
				float: left;
			}

			.date {
				float: right;
			}

		}

		.item-params, .handle {
			min-height: 57px;
		}

		.item-params {
			float: left;
			padding: 0 28px 0 10px;
			border-left: 1px solid lighten(#cacaca, 10%);
			margin: 3px 0;

			li {
				clear: both;
				padding: 2px 0;
				input, textarea, select, .uneditable-input {
					margin-bottom: 0;
					padding: 1px;
				}

				&.divider {
					padding: 0;
				}
			}

			input, textarea, select, .uneditable-input {
				height: 19px;
				line-height: 19px;
				font-size: @baseFontSize - 2;
				.border-radius(2px);
				width: 170px;
			}

			li > span {
				display:inline-block;
				text-align:right;
				font-size: @baseFontSize - 2;
				color: #999;
				float:left;
				line-height:23px;
				width: 57px;
				padding-right:5px;
			}

			.input-prepend,
			.input-append {
				margin-bottom: 0;
				display: inline-block;

				.add-on {
					height: 18px;
					padding: 3px 5px 0;
					line-height: 18px;
				}

				&:hover {
					i {
						.opacity(100);
					}
				}
			}
		}

		.handle {
			position: absolute;
			right: 0;
			background: url(../images/handle.png) 0 50% no-repeat;
			width: 25px;
			height: 100%;
			cursor: move;
		}
	}

	&.hide-items {
		.summary {
			width: 92% !important;
		}

		.article {
			.item-params {
				display: none;
			}
		}
	}
}

body.headers-fancy .article .summary h1 {
	font-size: 21px !important;
	line-height: 21px;
	padding: 0 !important;
	letter-spacing: -1px;
}

/* resizing article/titles based on viewport size */
@media screen and (min-width: 1440px) {
	body .articles, body #tabs-container .articles {
		.article {
			.summary {
				width: 60%;
			}
		}
	}
}

/* resizing article/titles based on viewport size */
@media screen and (max-width: 1175px) {
	body .articles, body #tabs-container .articles {
		.article {
			.summary, .summary.no-items {
				width: 92%;
				border-right: 0;
			}

			.item-params {
				border-left: 0;
				width: 92%;
				padding-left: 5px;
			}
		}
	}
}


/*@media screen and (max-width: 1040px) {
	body .articles, body #tabs-container .articles {
		.article {
			.summary, .summary.no-items {
				width: 84%;
				border-right: 0;
				margin-right: 0;
			}

			.item-params {
				border-left: 0;
			}
		}
	}
}
*/
